<template>
  <div class="faxianWrap">   
     <x-header title="发现" style="position:fixed;top:0px;z-index:1000;width:100%" ></x-header> 


    <div style="margin: 10px;overflow: hidden;margin-top:46px" v-for="(item,index) in list" :key="index">
      <a :href="item.urls">
        <masker style="border-radius: 2px;">
        <div class="m-img" :style="{backgroundImage: 'url(' + item.img + ')'}"></div>
        <div slot="content" class="m-title">
          {{item.title}}
          <br/>
          <span class="m-time">{{item.activeTime}}</span>
        </div>
      </masker>
      </a>
    </div>
  </div>

</template>

<script>
import {Masker,XHeader} from 'vux'
import $ from 'jquery';
import { homeUrl } from "../../components/utils/utils.js";
import axios from "axios";
import qs from "qs";

// const huoDongDataFn = () =>[
//     {
//       title: '洗颜新潮流！人气洁面皂排行榜',
//       img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2393231200,3394068150&fm=27&gp=0.jpg'
//     }, {
//       title: '美容用品 & 日用品（上）',
//       img: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2017696613,4091097911&fm=27&gp=0.jpg'
//     }, {
//       title: '远离车内毒气，日本车载空气净化器精选',
//       img: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1211580606,2974257922&fm=27&gp=0.jpg'
//     } 
//   ]

export default {
  
  components: {
    Masker,
    XHeader
  },
  data () {
    return {
      list: [
  
  ]
    }
  } , 
  methods:{
 onPlusReady1() {
    wx.scanQRCode({
      desc: 'scanQRCode desc',
      needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
      scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
      success: function (res) {
        // 回调
      },
      error: function(res){
            if(res.errMsg.indexOf('function_not_exist') > 0){
                alert('版本过低请升级')
              }
      }
  });
},
    findListReq(){
        this.$http.get(homeUrl() + "activeManageJsonSelect/").then(
        result => {
          console.log(result);
          if (result.data.status == "ok") {
            var findArr=[];
            const dataList = result.data.data;
            for(var i=0;i<dataList.length;i++){
            var findObj={};              
                findObj.title=dataList[i].activedetail;
                findObj.img=homeUrl()+"static/myfile/"+dataList[i].imgs;
                findObj.urls=dataList[i].activeAddress;
               findObj.activeTime=dataList[i].starttime
               findArr.push(findObj)
            }
            console.log("llllll")
            console.log(findArr)
            this.list=findArr
            // const urlList_ad = baseList_ad.map((item, index) => ({
            //   url: "/goods/goods_detail",
            //   img: homeUrl() + item.imgPath
            // }));
            // this.adList = urlList_ad;
          }
        },
        error => {
          this.$vux.toast.text("网络请求失败....", "bottom");
          console.log(error);
        }
      );
    }
  },
  created(){
    this.findListReq()
  },
  mounted () {
    // 计算发现滚动区域的高度
    var faxianWrapPaddingTop = $(".faxianWrap").css("padding-top").replace("px" , "");
    faxianWrapPaddingTop = parseInt(faxianWrapPaddingTop)
    var windowHeight = $(window).height()
    var headerHeight = $(".vux-header").outerHeight()
    var tabHeight = $(".weui-tabbar").outerHeight()
    $(".faxianWrap").height(windowHeight - headerHeight - tabHeight - faxianWrapPaddingTop)
  }
}
  
</script>


<style lang="less">

  /* 整个滚动区域 */
  .faxianWrap{
    padding-top: 10px;
    overflow: scroll;
  }

  /* 每一个列表样式 */
  .m-img {
    padding-bottom: 33%;
    display: block;
    position: relative;
    max-width: 100%;
    background-size: cover;
    background-position: center center;
    cursor: pointer;
    border-radius: 2px;
  }

  .m-title {
    color: #fff;
    text-align: center;
    text-shadow: 0 0 2px rgba(0, 0, 0, .5);
    font-weight: 500;
    font-size: 16px;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
  }

  .m-time {
    font-size: 12px;
    padding-top: 4px;
    border-top: 1px solid #f0f0f0;
    display: inline-block;
    margin-top: 5px;
  }
</style>